<template>
  <div>
    <DialogStyle>
      <el-dialog
        :visible="isShow"
        width="750px"
        title="工单详情"
        @close="closeFn"
      >
        <template>
          <el-alert
            :closable="false"
            type="info"
          >
            <template #title>
              <div class="alertCs">
                <div class="txtCs">
                  <i v-if="rowList.taskStatusTypeEntity.statusId===1" class="el-icon-question iconCs WaitIconColor" />
                  <i v-if="rowList.taskStatusTypeEntity.statusId===4" class="el-icon-success iconCs succIcon" />
                  <i v-if="rowList.taskStatusTypeEntity.statusId===3" class="el-icon-warning iconCs " />
                  <!-- <i :class="statusList.icon" /> -->

                  <span class="txtCs">{{ rowList.taskStatusTypeEntity.statusName }}</span>
                </div>
              </div>

            </template>

          </el-alert>
          <img v-if="rowList.taskStatusTypeEntity.statusId===1" src="../../../assets/wait.png" class="imgSize">
          <img v-if="rowList.taskStatusTypeEntity.statusId===4" src="../../../assets/finsh.png" class="imgSize">
          <img v-if="rowList.taskStatusTypeEntity.statusId===3" src="../../../assets/nope.png" class="imgSize">
          <!-- <img v-if="rowList.taskStatusTypeEntity.statusId" :src="statusList.src" class="imgSize"> -->
          <div>
            <el-form ref="detForm" class="formInfo">
              <el-form-item label="设备编号：" class="formItem">
                {{ rowList.innerCode }}
              </el-form-item>
              <el-form-item label="创建日期：" class="formItem">
                {{ rowList.createTime }}
              </el-form-item>
              <el-form-item label="取消日期：" class="formItem" :v-if="true">
                {{ rowList.updateTime }}
              </el-form-item>
              <el-form-item label="运营人员：" class="formItem">
                {{ rowList.userName }}
              </el-form-item>
              <el-form-item v-if="rowList.taskType" label="工单类型：" class="formItem">
                {{ rowList.taskType.typeName }}
              </el-form-item>
              <el-form-item label="补货数量：" class="formItem">
                <el-button style="border:none;color:#5f84ff">
                  补货详情
                </el-button>
              </el-form-item>
              <el-form-item label="工单方式：" class="formItem">
                111
              </el-form-item>
              <el-form-item label="取消原因：" class="formItem">
                {{ rowList.desc }}
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button v-if="rowList.taskStatusTypeEntity.statusId===3" class="wordBtn" @click="createdWordFn">重新创建</el-button>
        </template>
        <el-button
          v-if="rowList.taskStatusTypeEntity.statusId===1"
          class="WaitWordBtn"
          @click="DelWordFn"
        >取消工单 </el-button>
      </el-dialog>
    </DialogStyle>

  </div>
</template>

<script>
import { LoseWordApi } from '@/api'
export default {
  props: {
    rowList: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 取消工单
    DelWordFn() {
      this.$confirm('取消工单后，将不能恢复，是否确认取消？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await LoseWordApi(this.rowList)
          this.$message.success('取消成功')
          this.closeFn()
          this.$emit('fetchListFn')
        } catch (err) {
          this.$message.warning(`取消失败,${err.response.data}`)
        // console.dir(err)
        }
      }).catch(() => {})
    },
    // 关闭弹窗前的回调
    closeFn() {
      this.$emit('closeDialogFn')
      this.$refs.detForm.resetFields()
    },
    // 重新创建工单
    createdWordFn() {
      this.$emit('createdFn')
    }
  }
}
</script>

<style>
.WaitWordBtn{
  margin-left: 300px;
}
.wordBtn{
  margin-right: 300px;
}
.alertCs{
display: flex;
justify-content:space-between;
align-content:center;
font-size: 18px;
align-content: center;
}
.txtCs{
color: black;
 display: flex;
 align-items: center;
   }
   .el-alert--info.is-light{
    height: 79px;
   }
.iconCs{
font-size: 34px;
margin-right: 20px;
}
.WaitIconColor{
  color: #ff665f;
}
.imgSize{
  display: block;
  position: absolute;
  top: 70px;
  left: 530px;
width: 113px;
height: 93px;
}
::v-deep .el-form-item__label{
  font-size: 18px;
  font-weight: 400;
}
.formInfo{
  display: flex;
  flex-wrap: wrap;
  padding-left: 100px;
  padding-top: 50px;
  font-size: 28px;
}
.formItem{
width: 300px;
}
::v-deep .el-form-item__content{
  font-size: 18px;
}
.succIcon{
color:#79e192
}
</style>
